// WidgetMaterial.tsx（物料项组件，可拖拽）
import React from 'react';
import { useDrag } from 'react-dnd';
import { DragSourceMonitor } from 'react-dnd';
import type { WidgetMaterial } from './types';

interface WidgetMaterialProps {
  material: WidgetMaterial;
}

const WidgetMaterial: React.FC<WidgetMaterialProps> = ({ material }) => {
  // 定义拖拽源
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'WIDGET', // 拖拽类型（与放置目标匹配）
    item: { ...material }, // 传递给放置目标的数据
    collect: (monitor: DragSourceMonitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <div
      ref={drag}
      style={{
        padding: 16,
        margin: 8,
        border: '1px solid #ccc',
        borderRadius: 4,
        cursor: 'move',
        backgroundColor: '#fff',
      }}
    >
      {material.icon || <span>{material.name}</span>}
    </div>
  );
};

export default WidgetMaterial;
